<template>
    <div class="article__content">
        <div class="article__body crawler">
            <div class="snippet__body">
                <p>{{ cont1 }}</p>
                <p>{{ cont2 }} </p>
                <p>{{ cont3 }}</p>
                <!-- <p class="last">{{ cont3 }}
                </p> -->
                <!-- <div class="wrapper">
                    <div class="region region--full mrC">
                        <div class="column--full  u-center">
                            <div class="payregio element--text">
                                <h2 class="paywall__title">Don't miss out on this Special Offer</h2>
                                <h2 class="paywall__title"> </h2>
                            </div>
                            <div class="payregio element--text">
                                <p class="paywall__description">Get this article and all of Sinopoly Watch.</p>
                                <p class="paywall__description">Access from any device. Anywhere. Anytime.</p>
                            </div>
                            <div class="element--btn">
                                <a tabindex="-1" id="cXLinkIdlw4zlsqv6bah8010" class="btn btn--paywall align--center"
                                    href="">
                                    Subscribe Now: 50¢ per Week
                                </a>
                            </div>
                            <p class="sign-in">
                                Already a subscriber?
                                <router-link class="sign-in-btn" to="/login">Log in</router-link>
                            </p>
                        </div>
                    </div>
                </div> -->
            </div>
        </div>
    </div>
</template>
<script setup>
const props = defineProps(['content'])
const cont1 = ref('')
const cont2 = ref('')
const cont3 = ref('')
onMounted(() => {
    const regex = /<p>(.*?)<\/p>/g;
    let matches;
    let index = 1;
    while ((matches = regex.exec(props.content)) !== null) {
        if (index === 1) {
            cont1.value = matches[1];
        } else if (index === 2) {
            cont2.value = matches[1];
        } else if (index === 3) {
            cont3.value = matches[1];
        }
        index++;
    }
})
</script>
<style scoped lang='scss'>
.article__content {
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
}

.snippet__body {
    margin-top: 20px;
}

.article__body {
    width: 100%;
    color: #2e2e2e;
    font-size: 16px;
    border-bottom: 1px solid #e1e1e1;
    margin-bottom: 20px;
    padding-bottom: 20px;

    p {
        margin-bottom: 1.5em;
        position: relative;
    }

    .last::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 136px;
        background: -webkit-gradient(linear, left top, left bottom, from(hsla(0, 0%, 100%, 0)), to(#fff));
        background: linear-gradient(180deg, hsla(0, 0%, 100%, 0) 0, #fff);
        background: linear-gradient(180deg, hsla(0, 0%, 100%, 0) 0, #fff);
    }
}

.mrC {
    justify-content: center !important;
    padding: 40px 20px;
    margin: 0 auto;
}

.element--text {
    margin-bottom: 20px;
}

.payregio {
    h2:first-child {
        padding-bottom: 5px;
        margin-bottom: 0 !important;
    }

    h2 {
        font-weight: bold;
        font-size: 28px;
    }
}

.payregio .paywall__description {
    margin-bottom: 5px;
    color: #202020;
    font-size: 20px;
}

.element--btn {
    width: 100%;
    padding-bottom: 10px;

    .btn--paywall {
        border-radius: 18px;
        color: #202020;
        background-color: #fcb839;
        padding: 0 20px;
        font-weight: 700;
        display: inline-block;
        line-height: 36px;
        letter-spacing: .025em;
        text-transform: uppercase;
        height: 36px;
        font-size: 12px;
        font-weight: 700
    }
}

.sign-in {
    color: #202020;
    line-height: 20px;
    margin-bottom: 0 !important;
    font-size: 14px !important;
}

.sign-in-btn {
    color: #0274B6;
    cursor: pointer;
    text-decoration: underline !important;
    border-bottom: 0 !important;
}

.article__body:after {
    content: "";
    position: absolute;
    display: inline-block;
    width: 40px;
    height: 16px;
    bottom: -3px;
    margin: 0;
    padding: 0 36px;
    left: calc(50% - 36px);
    background-size: auto 16px;
    background-repeat: no-repeat;
    background-position: 50%;
    background-image: url();
    background-color: #fff;
}
</style>